<template>
  <div class="page-wrapper">
    <!-- Fixed Header and Footer Section -->
    <div class="fixed-section">
      <!-- Page Header and Project Overview -->
      <div class="page-header">
        <div class="page-header-heading">
          <div class="page-header-heading-left">
            <span class="header-title">单号：234231029431</span>
          </div>
          <div class="page-header-heading-extra">
            <button class="action-btn">操作一</button>
            <button class="action-btn">操作二</button>
            <button class="action-btn primary-btn">主操作</button>
          </div>
        </div>
        <div class="footer-tab">
          <button
            class="footer-btn"
          >项目概况</button>
          <button
            class="footer-btn"
          >预警建议</button>
        </div>
      <!-- Highlighted underlining -->
      <div class="highlight-indicator" :style="indicatorStyle"></div>
      </div>
    </div>

    <!-- Page Content -->
    <div class="page-content">
      <div class="description-wrapper">
        <div class="description">
          <div class="description-item">
            <span class="label">创建人 ： </span>
            <span class="content">Landslide</span>
          </div>
          <div class="description-item">
            <span class="label">项目类型 ： </span>
            <span class="content">基坑边坡</span>
          </div>
          <div class="description-item">
            <span class="label">创建时间 ： </span>
            <span class="content">2024-01-10</span>
          </div>
          <div class="description-item">
            <span class="label">关联单据 ： </span>
            <span class="content">12421</span>
          </div>
          <div class="description-item">
            <span class="label">监测时间 ： </span>
            <span class="content">2024-01-10 ~ 2024-08-08</span>
          </div>
          <div class="description-item">
            <span class="label">备注 ： </span>
            <span class="content">高层建筑边坡重要性程度：中</span>
          </div>
        </div>

        <!-- Project Status Steps -->
        <div class="card">
          <h4 class="card-title">项目情况</h4>
          <div class="timeline">
            <div class="step finished">
              <div class="step-dot"></div>
              <div class="step-details">
                <span class="step-title">监测设备安装</span>
                <div class="step-description">Landslide - 2023-12-12 12:32</div>
              </div>
            </div>
            <div class="step finished">
              <div class="step-dot"></div>
              <div class="step-details">
                <span class="step-title">实时监测</span>
                <div class="step-description">User - 2024-01-10 11:32</div>
              </div>
            </div>
            <div class="step pending">
              <div class="step-dot"></div>
              <div class="step-details">
                <span class="step-title">数据告警</span>
              </div>
            </div>
            <div class="step pending">
              <div class="step-dot"></div>
              <div class="step-details">
                <span class="step-title">现场处理</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Project Information -->
        <div class="card">
          <h4 class="card-title">项目信息</h4>
          <div class="description">
            <div class="description-item">
              <span class="label">项目用户 ： </span>
              <span class="content">湖南省XX集团</span>
            </div>
            <div class="description-item">
              <span class="label">项目类型 ： </span>
              <span class="content">2号基坑边坡</span>
            </div>
            <div class="description-item">
              <span class="label">项目编号 ： </span>
              <span class="content">XX-XX-02</span>
            </div>
            <div class="description-item">
              <span class="label">联系方式 ： </span>
              <span class="content">18112345678</span>
            </div>
            <div class="description-item" style="width: 100%;">
              <span class="label">项目位置 ： </span>
              <span class="content">
                湖南省长沙市文源街道湖南铁院土木检测公司
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <h4 class="card-title">项目测点布置</h4>
        <div class="image-container">
          <img :src="imageSrc" alt="测点布置" />
        </div>
        <div class="discribe">测点布置图</div>
        <div class="table-container">
          <table class="refund-table">
            <thead>
              <tr>
                <!-- Render column headers dynamically -->
                <th v-for="(column, index) in refundTimeTableSchema" :key="index">
                  {{ column.title }}
                </th>
              </tr>
            </thead>
            <tbody>
              <!-- Render rows dynamically -->
              <tr v-for="(row, index) in refundTimeTableData" :key="index">
                <td v-for="(column, colIndex) in refundTimeTableSchema" :key="colIndex">
                  <!-- Custom rendering for specific columns -->
                  <template v-if="column.customRender">
                    <component :is="column.customRender" :record="row" />
                  </template>
                  <template v-else>
                    {{ row[column.dataIndex] }}
                  </template>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Badge } from 'ant-design-vue';
const imageSrc = new URL('./high/1.png', import.meta.url).href;
  

const refundTimeTableSchema = [
  { title: '时间', width: 150, dataIndex: 't1' },
  { title: '当前进度', width: 150, dataIndex: 't2' },
  { 
    title: '状态', 
    width: 150, 
    dataIndex: 't3',
  },
  { title: '设备ID', width: 150, dataIndex: 't4' },
  { title: '数据值', width: 150, dataIndex: 't5' }
];


const refundTimeTableData = [
  { t1: '2017-10-01 14:10', t2: '倾角计', t3: '运行中', t4: '设备号 ID1234', t5: '5mins' },
  { t1: '2017-10-01 14:10', t2: '倾角计', t3: '运行中', t4: '设备号 ID1234', t5: '5mins' },
  { t1: '2017-10-01 14:10', t2: '倾角计', t3: '关闭中', t4: '设备号 ID1234', t5: '5mins' },
  { t1: '2017-10-01 14:10', t2: '倾角计', t3: '运行中', t4: '设备号 ID1234', t5: '1h' }
];
</script>

<style scoped>
  .page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .fixed-section {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #f8f8f8;
  }

  .page-header {
    background-color: #f8f8f8;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .page-header-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-title {
    font-size: 20px;
    font-weight: bold;
  }

  .page-header-heading-extra {
    display: flex;
    gap: 8px;
  }

  .action-btn {
    padding: 8px 16px;
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .primary-btn {
    background-color: #409eff;
    color: white;
  }

  .footer {
    padding: 16px;
    background-color: #f8f8f8;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  }

  .footer-tab {
    display: flex;
    gap: 16px;
    justify-content: left;
  }

  .footer-btn {
    padding: 8px 16px;
    background: none;
    color: #333;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    margin-top: 10px;
  }

  .footer-btn.active {
    color: #409eff;
    font-weight: bold;
  }

  .highlight-indicator {
    height: 2px;
    background-color: #409eff;
    margin-top: 4px;
    margin-left: 4px;
    max-width: 80px;
  }

  .page-content {
    padding: 16px;
    flex: 1;
    background-color: #f9f9f9;
  }

  .description-wrapper {
    margin-bottom: 32px;
  }

  .description {
    background-color: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap; 
    display: flex;
    gap: 16px; 
    }


  .description-item {
    width: 48%; 
    display: flex;
    justify-content: space-between; 
    margin-bottom: 4px;
  }

  .description-item .label {
    flex: -20%;
  }

  .description-item .content {
    flex: 1; 
  }

  .card-title{
    font-weight: bold;
    font-size: large;
  }

  .label {
    font-weight: auto;
    color: #333;
  }

  .content {
    color: #666;
  }

  .card {
    background-color: white;
    padding: 16px;
    margin-bottom: 32px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
  }

  .steps {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
  }
  
  .step.pending {
    opacity: 0.5;
  }

  .step.current {
    color: #409eff;
  }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .discribe {
    text-align: center;
    margin-top: 8px;
  }

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  padding-left: 40px; 
}

.step {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.step-dot {
  width: 16px;
  height: 16px;
  background-color: #ccc; 
  border-radius: 50%;
  position: absolute;
  left: -24px; 
  transition: background-color 0.3s ease;
}

.step.finished .step-dot {
  background-color: #409eff; 
}

.step.pending .step-dot {
  background-color: #999; 
}

.step-details {
  padding-left: 20px;
}

.step-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.step-description {
  color: #777;
  font-size: 14px;
}

.timeline::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 118px;
  width: 2px;
  height: 120px; 
  background-color: #ccc;
  z-index: 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 22px;
  width: 2px;
  height: 80px; 
  background-color: #409eff;
  z-index: 0;
}

.step.finished + .step::before {
  background-color: #409eff; 
}

.step.pending::before {
  background-color: transparent;

}

.step.pending + .step .step-dot {
  background-color: #999; 
}

.table-container {
  margin-top: 20px;
  font-family: 'Arial', sans-serif;
  padding: 10px;
}

.refund-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.refund-table th,
.refund-table td {
  text-align: left;
  padding: 10px;
}

.refund-table th {
  background-color: #f4f6f9;
  font-weight: bold;
}

.refund-table td {
  border-top: 1px solid #f0f0f0;
}

.refund-table tbody tr:hover {
  background-color: #f9f9f9;
}

.refund-table .ant-badge-status-success {
  background-color: #52c41a;
}
</style>
